<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #div1 {
            width: 712px;
            height: 300px;
            margin: 100px auto;
            position: relative;
            background: red;
            overflow: hidden;
        }

        #div1 ul {
            position: absolute;
            left: 0;
            top: 0;
        }

        #div1 ul li {
            float: left;
            width: 178px;
            height: 108px;
            list-style: none;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');

            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;//变成两副图，然后才能实现无缝滚动

            oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';//随便获取一个li的宽度，这里用第一个代表计算出ul的长度
            setInterval(function () {
                if (oUl.offsetLeft < -oUl.offsetWidth / 2) {//offsetLeft是负数，而offsetWidth是一个最小大于0的数，所以加个-号才能进行比较
                    oUl.style.left = '0';//当所有图片滚动完之后将left设置为0意味着后面无缝地接着第一张图片，这个过程如果看见两副图片就会看见有些变化，但实际上只会看见一副，所以几乎没有变化
                }
                oUl.style.left = oUl.offsetLeft - 2 + 'px';//每次向左移动2px

            }, 30);
        };

    </script>
</head>
<body>
<div id="div1">
    <ul>
        <li><img src="../img/10_hf6d.jpg" height="300" width="300"/></li>
        <li><img src="../img/11_bo39.jpg" height="300" width="300"/></li>
        <li><img src="../img/12_38ve.jpg" height="300" width="300"/></li>
        <li><img src="../img/31_mixq.jpg" height="300" width="300"/></li>
    </ul>
</div>


</body>
</html>